<!-- components/custom-modal.vue -->
<template>
	<view v-if="showModal" class="modal-mask">
		<view class="modal-container">
			<!-- 标题 -->
			<view class="modal-title" :style="{ color: titleColor }">{{ title }}</view>

			<!-- 内容 -->
			<view class="modal-content" :style="{ color: contentColor }">
				<slot>{{ content }}</slot>
			</view>

			<!-- 按钮区域 -->
			<view class="modal-buttons">
				<view class="btn confirm-btn" :style="{ 
		      backgroundColor: confirmBgColor,
		      color: confirmColor
		    }" @click="handleConfirm">
					{{ confirmText }}
				</view>
				<view class="btn cancel-btn" :style="{ 
            backgroundColor: cancelBgColor,
            color: cancelColor
          }" @click="handleCancel" v-if="showCancelButton">
					{{ cancelText }}
				</view>

			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue'

	const props = defineProps({
		// 控制显示
		modelValue: {
			type: Boolean,
			default: false
		},
		// 标题相关
		title: {
			type: String,
			default: '提示'
		},
		titleColor: {
			type: String,
			default: '#333'
		},
		// 内容相关
		content: {
			type: String,
			default: ''
		},
		contentColor: {
			type: String,
			default: '#666'
		},
		// 确定按钮
		confirmText: {
			type: String,
			default: '确定'
		},
		confirmBgColor: {
			type: String,
			default: '#007AFF'
		},
		confirmColor: {
			type: String,
			default: '#fff'
		},
		// 取消按钮
		cancelText: {
			type: String,
			default: '取消'
		},
		cancelBgColor: {
			type: String,
			default: '#eee'
		},
		cancelColor: {
			type: String,
			default: '#333'
		},
		showCancelButton:{
			type:Boolean,
			default:true
		}
	})

	const emit = defineEmits(['update:modelValue', 'confirm', 'cancel'])

	const showModal = ref(false)

	// 监听modelValue变化
	watch(() => props.modelValue, val => {
		showModal.value = val
	})

	// 确认处理
	const handleConfirm = () => {
		closeModal()
		emit('confirm')
	}

	// 取消处理
	const handleCancel = () => {
		closeModal()
		emit('cancel')
	}

	// 关闭弹窗
	const closeModal = () => {
		showModal.value = false
		emit('update:modelValue', false)
	}

	// 暴露方法
	defineExpose({
		open: () => showModal.value = true,
		close: closeModal
	})
</script>

<style lang="scss" scoped>
	.modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
	}

	.modal-container {
		width: 70%;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
	}

	.modal-title {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.modal-content {
		font-size: 32rpx;
		line-height: 1.5;
		padding: 20rpx 0;
		text-align: center;
	}

	.modal-buttons {
		display: flex;
		flex-direction: column;
		margin-top: 40rpx;
	}

	.btn {
		border-radius: 8rpx;
		display: flex;
		margin-top: 20rpx;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		height: 80rpx;
		margin-bottom: 20rpx;
	}

	.cancel-btn {
		margin-right: 20rpx;
		margin-left: 20rpx;
	}

	.confirm-btn {
		margin-left: 20rpx;
		margin-left: 20rpx;

	}
</style>